import React, { useState, useCallback, useEffect } from 'react';
import { Common } from 'UtilsCommon';
import { Input, TextArea, SearchBar } from 'antd-mobile';
import Base from './base';
import * as styles from '../styles/view.scss';

const setMinMaxValue = (value, property) => {
    if (Common.isNullOrEmpty(value)) return value;

    const { MinValue, MaxValue, dataType } = property;
    if (dataType !== 'int' && dataType !== 'float') return value;

    if (Common.isNullOrEmpty(MinValue) && Common.isNullOrEmpty(MaxValue)) return value;

    const v = Common.getFloatValue(value);

    if (!Common.isNullOrEmpty(MinValue) && v < MinValue) value = MinValue;
    else if (!Common.isNullOrEmpty(MaxValue) && v > MaxValue) value = MaxValue;

    return value;
};

const judgeMinusDot = (value) => {
    if (value === '-') return true;
    if (value === '.') return false;

    if (value.substring(value.length - 1, value.length) === '0') return true;

    if (value.substring(0, value.length - 1).indexOf('.') > 0) return false;

    return value.substring(value.length - 1) === '.';
};

const change = (value, property, setValue) => {
    if (value && property.regExp) value = value.replace(new RegExp(property.regExp, 'ig'), '');
    if (value && property.dataType === 'float' && !judgeMinusDot(value)) value = Common.getNumber(value, property.scale);
    if (value && property.dataType === 'int') value = Common.getIntValue(value);

    if (value === 0 && value !== '0') value = '';

    value = setMinMaxValue(value, property);

    setValue(value);
    Base.bindDataValue(property, value);
};

const valueChange = (property, value) => {
    if (property.valueChange) property.valueChange(value, property);
};

const renderLabel = (label2, isAddColon, isRed2) => {
    return <div className={styles.divLabel}>
        {isRed2 ? <span className='spRed' style={{ color: 'red' }}>*</span> : ''}
        <span dangerouslySetInnerHTML={{ __html: label2 + (isAddColon ? '：' : '') }}></span>
    </div>;
};
const renderEmptyTip = (isEmptyTip, value2) => {
    return <div className={styles.divEmptyTip}>
        {isEmptyTip && Common.isNullOrEmpty(value2) && <span>请输入内容</span>}
    </div>;
};

const renderInput = (property, onChange, onEnterPress, onFocus, onBlur, isReadOnly, disabled, type, clear2, value2) => {
    return (<Input placeholder={property.placeHolder}
        onChange={onChange}
        maxLength={property.maxLength}
        readOnly={isReadOnly}
        disabled={disabled && !isReadOnly}
        type={type}
        clearable={clear2}
        onBlur={onBlur}
        onFocus={onFocus}
        onEnterPress={onEnterPress}
        value={value2}></Input>
    );
};

const renderSerchBar = (property, onChange, onEnterPress, onFocus, onBlur, isReadOnly, disabled, type, clear2, value2) => {
    return (<SearchBar placeholder={property.placeHolder}
        onChange={onChange}
        maxLength={property.maxLength}
        readOnly={isReadOnly}
        disabled={disabled && !isReadOnly}
        type={type}
        clearable={clear2}
        onBlur={onBlur}
        onFocus={onFocus}
        onSearch={onEnterPress}
        value={value2}></SearchBar>
    );
};

const renderTextArea = (property, rows, onChange, isReadOnly, disabled, value2) => {
    return (<TextArea placeholder={property.placeHolder}
        rows={rows || 2}
        autoSize={property.autoSize}
        onChange={onChange}
        maxLength={property.maxLength}
        readOnly={isReadOnly}
        disabled={disabled && !isReadOnly}
        showCount={property.showCount && !disabled && !isReadOnly}
        value={value2} />
    );
};

export default (props) => {
    const { property, view, pageAxis } = Base.getProps(props);
    const [value, setValue] = useState(Base.getInitValue(property));
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [disabled, setDisabled] = useState(!!property.disabled);
    const [isReadOnly, setIsReadOnly] = useState(!!property.isReadOnly);
    const [isEmptyTip, setIsEmptyTip] = useState(false);
    const [, setRefresh] = useState('');

    const onChange = useCallback((v) => {
        property.isChanged = true;
        change(v, property, setValue);
    }, [property, setValue]);

    const onBlur = useCallback(() => {
        property.onBlur && property.onBlur(value, property);
    }, [property, value]);

    const onFocus = useCallback(() => {
        property.onFocus && property.onFocus(value, property);
    }, [property, value]);

    const onEnterPress = useCallback(() => {
        if (property.enterEventActionName) pageAxis.invokeEventAction(property.enterEventActionName, { property, view, pageAxis });
        else if (property.enterEventAction) pageAxis.invokeEventAction2(property.eventAction, { property, view, pageAxis });
    }, [property, view, pageAxis]);

    useEffect(() => {
        valueChange(property, value);
    }, [property, value]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);
    property.getValue = () => Base.getValue(property, value);
    property.setDisabled = (v) => setDisabled(v);
    property.setIsReadOnly = (v) => setIsReadOnly(v);
    property.setIsEmptyTip = (v) => setIsEmptyTip(v);
    property.setRefresh = () => setRefresh(Common.createGuid());

    if (!isVisible) return null;

    const { label, clear, isRed, rows, isValueVisible, cssTemplate, isAddColon } = property;
    let isNullable = property.isNullable;

    if (isValueVisible && !value) return null;

    const type = isReadOnly ? 'text' : (property.controlType || 'text');

    const className = Base.getClassName(property, styles);

    const cNames = [];
    if (className) cNames.push(className);
    if (cssTemplate) cNames.push(cssTemplate.cssName);

    let clear2 = clear === undefined ? true : clear;
    if (isReadOnly || disabled) clear2 = false;

    property.placeHolder = property.placeHolder || (isNullable ? '选填' : '请输入');

    let isRed2 = property.isRed2 || (isNullable === false && isRed);
    if (isReadOnly) {
        isRed2 = false;
        isNullable = true;
        property.placeHolder = '';
    }

    const label2 = property.isLabel === false ? '' : label;

    const value2 = Common.isNullOrEmpty(value) ? '' : value;

    const isTextArea = property.controlType === 'textarea';
    const search = property.controlType === 'search';

    return <div className={cNames.join(' ')} style={Base.setStyle(property.style)}>
        {label2 && renderLabel(label2, isAddColon, isRed2)}
        {isTextArea && renderTextArea(property, rows, onChange, isReadOnly, disabled, value2)}
        {search && renderSerchBar(property, onChange, onEnterPress, onFocus, onBlur, isReadOnly, disabled, type, clear2, value2)}
        {!isTextArea && !search && renderInput(property, onChange, onEnterPress, onFocus, onBlur, isReadOnly, disabled, type, clear2, value2)}
        {property.isEmptyTip && renderEmptyTip(isEmptyTip, value2)}
    </div>;
};